<template>
  <div>
    <van-nav-bar :title="$route.meta.title" left-text="返回" :right-text="followInfo && followInfo.billStatus === '保存' ? '编辑' : '审批记录'" left-arrow :fixed="true" :placeholder="true" @click-left="goBack()" @click-right="goAddFollow" />
    <div class="tabBarBox" v-if="followInfo && followInfo.cusLevel === 'D'">
      <van-tabs v-model="tabActive" sticky offset-top="46" color="#1684FC">
        <van-tab title="跟进信息">
          <only-follow-detail :followInfo="followInfo" />
        </van-tab>
        <van-tab title="战败原因">
          <div class="failInfo">
            <van-field v-model="followInfo.DReasonName" name="D级原因" label="D级原因" input-align="right" readonly />
            <van-field v-model="followInfo.DFailRes" name="战败原因" label="战败原因" input-align="right" readonly />
            <van-field v-model="followInfo.failReason" name="战败他品" label="战败他品" input-align="right" readonly />
            <van-field v-model="followInfo.DReasonDes" name="D级原因说明" label="D级原因说明" input-align="left" readonly type="textarea" autosize />
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <only-follow-detail v-else-if="followInfo && followInfo.cusLevel" :followInfo="followInfo" />
    <van-empty class="noContent" description="暂无数据" v-else />

    <!-- <div class="goBack" @click="$router.go(-1)">返回</div> -->
    <!-- 审核情况 -->
    <AuditRecord :visible="auditVisible" :billId="followInfo.billId" @close="auditVisible = false"></AuditRecord>
  </div>
</template>

<script>
import AuditRecord from "@/components/AuditRecord";
import sellManageApi from "@/api/sellManageApi";
import onlyFollowDetail from "./components/onlyFollowDetail";

const { secondHandCarFacade } = sellManageApi;
export default {
  components: {
    AuditRecord,
    onlyFollowDetail
  },
  data() {
    return {
      tabActive: 0,
      // 跟进信息
      followInfo: {},
      followInfo1: {
        billId: "单据ID", //单据ID
        number: "WL-25625872126", // 登记单编号
        billStatus: "", // 状态
        showOrgName: "厦门集美凯迪拉克", // 展厅
        customerName: "王某某", // 客户姓名
        cusType: "潜在客户", // 客户状态
        sourceChannelName: "垂直媒体-懂车帝", // 来源渠道
        interModelName: "CT5", // 意向车系
        followPersonName: "陈欧某", // 跟进人员
        followDate: "2023-01-05", // 跟进日期
        followType: "电话", //跟进方式
        cusLevel: "A", // 意向级别
        testDriveAlias: 1, // 是否试驾
        followNote:
          "根基记录描述根基记录描述根基记录描述根基记录描述根基记录描述根基记录描述根基记录描述", // 跟进记录
        nextFollowDate: "2023-01-05", // 下次跟进日期
        mgrLevel: "A", // 销售经理定级
        DReasonName: "战败客户", // D级原因
        DFailDes: "价格", // 战败原因
        failReason: "A6L", // 战败他品
        DReasonDes:
          "说不清楚。地方时间嗯放假了是的福利卡就好搞定了你的给你 集合第三方发的分  分" // D级原因说明
      },
      followInfo1: {},
      auditVisible: false // 是否展示审批记录
    };
  },
  mounted() {
    this.detailId = this.$route.query.billId;
    console.log("followId:", this.detailId);
    this.getFollowIdetail();
  },
  methods: {
    goBack() {
      // this.$router.go(-1)
      this.$router.replace({
        path: "/customManageDetail",
        query: { billId: localStorage.getItem("customerId"), goTwo: true }
      });
    },
    // 根据ID获取跟进详情
    getFollowIdetail() {
      console.log("根据ID获取跟进详情");
      secondHandCarFacade({
        method: "getCustomerFollowById", //固定值
        billId: this.detailId // 单据ID，必填，String
      }).then(res => {
        console.log("res", res);
        if (res.code === 1) {
          this.followInfo = res.data;
        }
      });
    },
    // 跳转编辑跟进
    goAddFollow() {
      console.log("status:", this.followInfo.billStatus);
      console.log("status:", this.followInfo.billStatus !== "提交");
      if (this.followInfo.billStatus === "保存") {
        this.$router.replace({
          path: "/customManageFollowEdit",
          query: { billId: this.detailId }
        });
      } else {
        this.auditVisible = true;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.goBack {
  width: 80%;
  background: #2381e6;
  color: #fff;
  font-size: 16px;
  margin: auto;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  margin-bottom: 25px;
  margin-top: 25px;
}
</style>